<script>
export default {
  name: 'StudyDesktop',
  components: {}
}
</script>

<script setup>
import { ref, watch } from 'vue'
import CustomCalendar from '@/components/calendar/index.vue'
import ClockWidget from '@/components/clock/index.vue'
import TodoList from '@/components/todoList/index.vue'

// 定义小组件数据
const items = ref([
  { id: 1, name: '日历', component: CustomCalendar, size: { rows: 3, cols: 3 } }, // 日历组件，大小为 3x3
  { id: 2, name: '时钟', component: ClockWidget, size: { rows: 1, cols: 2 } }, // 时钟组件，大小为 1x2
  { id: 3, name: 'DeepSeek', url: 'https://deepseek.com', size: { rows: 1, cols: 1 } },
  { id: 4, name: '文心一言', url: 'https://yiyan.baidu.com', size: { rows: 1, cols: 1 } },
  { id: 5, name: '豆包', url: 'https://doubao.com', size: { rows: 1, cols: 1 } },
  { id: 6, name: 'Kimi', url: 'https://kimi.com', size: { rows: 1, cols: 1 } },
  { id: 7, name: '通义千问', url: 'https://tongyi.aliyun.com', size: { rows: 1, cols: 1 } },
  { id: 8, name: '百度', url: 'https://www.baidu.com', size: { rows: 1, cols: 1 } },
  { id: 9, name: 'Bilibili', url: 'https://www.bilibili.com', size: { rows: 1, cols: 1 } },
  { id: 10, name: '小红书', url: 'https://www.xiaohongshu.com', size: { rows: 1, cols: 1 } },
  { id: 11, name: '知乎', url: 'https://www.zhihu.com', size: { rows: 1, cols: 1 } },
  { id: 12, name: 'CSDN', url: 'https://www.csdn.net', size: { rows: 1, cols: 1 } },
])

const newComponentName = ref('')
const newComponentUrl = ref('')
const newComponentType = ref('external')
const newComponentSize = ref({ rows: 1, cols: 1 }) // 默认值为 1x1

// 监听 rows 和 cols 的值
watch(
  () => [newComponentSize.value.rows, newComponentSize.value.cols],
  ([newRows, newCols]) => {
    if (newRows < 1) newComponentSize.value.rows = 1
    if (newCols < 1) newComponentSize.value.cols = 1
  }
)

const addComponent = () => {
  if (newComponentName.value.trim() && newComponentUrl.value.trim()) {
    const name = newComponentName.value.slice(0, 5) // 限制名字长度为5个字符
    items.value.push({
      id: items.value.length + 1,
      name: name,
      url: newComponentUrl.value,
      type: newComponentType.value,
      size: {...newComponentSize.value } // 使用当前的值
    })
    newComponentName.value = '' // 清空名称
    newComponentUrl.value = '' // 清空 URL
    newComponentSize.value = { rows: 1, cols: 1 } // 重置 rows 和 columns 为 1
  } else {
    alert('请输入有效的组件名称和网址')
  }
}

// 新增搜索输入框的 ref
const searchInput = ref(null)

// 搜索处理函数
const handleSearch = () => {
  const keyword = searchInput.value?.value.trim()
  if (keyword) {
    const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`
    window.open(searchUrl, '_blank')
  }
}

// 控制 TodoList 的显示
const showTodoList = ref(false)

// 点击 TodoList 小组件盒子时触发
const toggleTodoList = () => {
  showTodoList.value =!showTodoList.value
}

// 点击模态框外部区域时关闭 TodoList
const closeTodoList = (event) => {
  if (event.target.classList.contains('todo-list-overlay')) {
    showTodoList.value = false
  }
}
</script>

<template>
  <div class="main">
    <div class="top">
      <input
        type="text"
        :placeholder="$t('study-desktop.Input placeholder')"
        class="search-bar"
        ref="searchInput"
      />
      <button class="search-button" @click="handleSearch">{{ $t('study-desktop.Search') }}</button>
    </div>

    <div class="add-component">
      <input
        type="text"
        v-model="newComponentName"
        :placeholder="$t('study-desktop.Component name')"
        class="component-input"
      />
      <input
        type="text"
        v-model="newComponentUrl"
        :placeholder="$t('study-desktop.Component URL')"
        class="component-input"
      />
      <input
        type="number"
        v-model="newComponentSize.rows"
        placeholder="Rows"
        class="component-input no-spinner"
        min="1"
      />
      <input
        type="number"
        v-model="newComponentSize.cols"
        placeholder="Columns"
        class="component-input no-spinner"
        min="1"
      />
      <button class="add-button" @click="addComponent">{{ $t('study-desktop.Add component') }}</button>
    </div>

    <div class="grid-container">
      <div v-for="item in items" :key="item.id" class="grid-item" :style="{ gridRowEnd: 'span ' + item.size.rows, gridColumnEnd: 'span ' + item.size.cols }">
        <template v-if="item.component">
          <!-- 如果是可展开的组件（如 TodoList） -->
          <div v-if="item.type === 'expandable'" @click="toggleTodoList" class="expandable-box">
            <span>{{ item.name }}</span>
          </div>
          <!-- 如果是普通组件 -->
          <component v-else :is="item.component" />
        </template>

        <template v-else-if="item.url">
          <!-- 如果是外部链接 -->
          <a :href="item.url" target="_blank" class="centered-link">
            <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
            {{ item.name }}
          </a>
        </template>
      </div>
    </div>

    <!-- 在页面中间展示 TodoList -->
    <div v-if="showTodoList" class="todo-list-overlay" @click="closeTodoList">
      <div class="todo-list-modal">
        <TodoList />
        <button @click="toggleTodoList" class="close-button">关闭</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import '/src/css/base.css';
@import '/src/css/studyDesktop/index.css';


</style>
